let arr = [
  {
    name: "消息类",
    value: 5,
  },
  {
    name: "命令类",
    value: 3,
  },
  {
    name: "指令类",
    value: 2,
  },
  {
    name: "其它",
    value: 5,
  },
];
const pieUnit = "KB";
let allValue = 0;
arr.map((it) => {
  allValue += it.value;
});

export const paiWithCenterChart = {
  color: ["#f33335", "#efb158", "#338ae0", "#41dba7"],
  tooltip: {
    trigger: "item",
  },
  title: {
    zlevel: 0,
    text: "累计出栈数据",
    subtext: "100KB",
    top: "42%",
    left: "50%",
    textAlign: "center",
    textStyle: {
      color: "#fff",
      fontSize: 20,
    },
    subtextStyle: {
      fontSize: 18,
      color: "#33cdfa",
    },
  },

  series: [
    {
      name: "",
      type: "pie",
      radius: ["50%", "65%"],
      center: ["50%", "50%"],
      startAngle: 150,
      avoidLabelOverlap: false,
      itemStyle: {
        borderColor: "transparent",
        borderWidth: 5,
      },
      labelLine: {
        length: 20,
      },
      grid: {
        top: "10px",
        left: "10%",
        right: "10px",
        bottom: "0px",
      },
      label: {
        bleedMargin: 5,
        alignTo: "labelLine",
        position: "outer",
        formatter: (params) => {
          if (params.name) {
            return (
              `{name| ${
                params.name +
                "\u0020" +
                parseInt((params.value / allValue) * 100)
              } %} \n` + `{itVal|${params.value + pieUnit}}`
            );
          }
        },
        backgroundColor: "rgba(0, 0, 0, 0)",
        borderColor: "rgba(0, 0, 0, 0)",
        borderWidth: 1,

        borderRadius: 4,
        color: "inherit",
        rich: {
          name: { fontSize: 16 },
          itVal: { fontSize: 16, padding: [5, 0, 0, 5] },
        },
      },
      data: [...arr],
    },
  ],
};
